<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="execution">
    <basic-container>
      <el-container>
        <el-aside width="50%">
      <avue-crud
              v-model="form"
              v-model:page="page"
              :permission="getPermission"
              v-bind="bindVal"
              v-on="onEvent"
              :option="option"
              :data="tableData"
               @row-click="rowItemClick"
              :before-open="beforeOpen"
      >
        <template #menu="{row}">

          <el-button link type="primary" size="small" icon="el-icon-plus" @click="handleAdd(row)">子级</el-button>

        </template>
      </avue-crud>
        </el-aside>
        <el-main>
          <basic-container>
            <avue-crud
                ref="itemCrud"
                v-model:page="itemPage"
                :data="tableItemData"
                @search-change="jtemSearchChange"
                v-model:search="searchForm2"
                :option="tableItemOption"
                @size-change="itemSizeChange"
                @current-change="itemCurrentChange"

            >
            </avue-crud>
          </basic-container>

        </el-main>
      </el-container>
    </basic-container>
  </div>
</template>

<script>
  import {tableOption} from './dept.js'
  import crud from "@/framework-core/mixins/crud";
  import {fetchTree} from '@/framework-admin/api/admin/dept'
  import website from "@/framework-core/config/website";
  import {pageCore} from "@/framework-core/api/core/api";
  import {convertVantMobile} from "@/framework-core/utils/util";

  export default {
    name: 'Dept',
    mixins: [crud],
    data() {
      return {
        pageConfig:{"url":"/sys/org","delProp":"name"},
        searchForm: {},
        parentId:null,
        loading: false,
        form:{},
        option: tableOption,

        itemPage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: website.pageSize // 每页显示多少条
        },
        selectOrgId:"",
        searchForm2: {},
        tableLoading: true,
        tableItemData: [],
        tableItemOption:  {
          border: true,
          index: true,
          menu:false,
          addBtn:false,
          indexLabel: '#',
          stripe: true,
          menuAlign: 'center',
          grid: window.isMobile,
          gridSpan: 24,
          searchMenuSpan: 6,
          align: 'center',
          searchEnter:true,
          column: [
            {
              type:"input",
              label: '姓名',
              prop: 'nickName',
              fixed: true,
              search: true,
              span: 24,
            },
            {
              type: 'input',
              label: '手机号',
              prop: 'phone',
              span: 24,
            },
            {
              type: 'select',
              label: '性别',
              prop: 'sex',
              sortable:"custom",
              "span": 12,
              width:"80px",
              dicCode:"sex",
              dicCodeType:1,
              'search': true,
            },
            {
              type: 'input',
              label: '邮箱',
              prop: 'email',
              span: 24,
            },
            {
              type: 'switch',
              label: '下级机构',
              prop: 'only',
              dicData: [
                {label: '关', value: 1},
                {label: '开', value: 2}
              ],
              'search': true,
              hide: true,
              value: 1
            }
          ]
        }
        ,

      }
    },
    computed: {
      ...mapState({
        permissions: (state) =>state.user.permission,
      })
    },
    created() {
      try {
        this.$initOptionDict(this.tableItemOption.column);
      } catch (e) {
      }
      try {
        convertVantMobile(this.tableItemOption);
      } catch (e) {
      }
    },
    methods: {
      getPage() {
        this.loading = true;
        fetchTree(
            {"key":this.searchForm.name}
        )
                .then(response => {
                  this.tableData = response.data.data.data;
                //  this.page.total = response.data.data.total;
                  this.loading = false;

                })
                .catch(() => {
                  this.loading = false;
                });
      },
      saveBefor (row) {
        if(! row.parentId &&  row.id!= this.parentId){
          row.parentId = this.parentId;
        }
        if(!row.parentId){
          row.parentId = 0;
        }
      },

      handleAdd (row) {
        this.parentId = row.id
        this.$refs.crud.rowAdd()
      },
      getPermission: function (key, row, index) {
        //return this.getCommPermission(key, row, index);
        return true;
      },
      rowItemClick(row, column, event){
        this.selectOrgId = row.id;
        this.getItemPage();
      },
      getItemPage(done) {
        this.tableLoading = true;
        pageCore("sys/user", this.buildParam2())
            .then(response => {
              this.tableItemData = response.data.data.records;
              this.itemPage.total = response.data.data.total;
              this.tableLoading = false;
              if(done){
                done();
              }
            })
            .catch(() => {
              this.tableLoading = false;
              if(done){
                done();
              }
            });
      },
      jtemSearchChange(params,done){
        this.getItemPage(done);
      },
      itemSizeChange(pageSize) {
        this.itemPage.pageSize = pageSize;
        this. getItemPage();
      },
      itemCurrentChange(current) {
        this.itemPage.currentPage = current;
        this. getItemPage();
      },
      buildParam2() {
        var entity = Object.assign(
            {},
            {},
            this.searchForm2
        );
        entity.orgId = this.selectOrgId;
        let obj = {
          pageNum: this.itemPage.currentPage,
          pageSize: this.itemPage.pageSize,
          // sorts: sorts
        };
        obj.entity = entity;
        if (this.beforParam) {
          this.beforParam(obj.entity);
        }
        return obj;
      },

    }
  }
</script>
